import React, {Component} from 'react';
import Form from "antd/es/form";
import {Avatar, Button, Comment} from "antd";
import TextArea from 'antd/lib/input/TextArea';
import {SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import {inject, observer} from "mobx-react";
import CommentStore from "../../stores/CommentStore";
import UserStore from "../../stores/UserStore";
import {CheckUserLogin, CheckUserAuthorized, CheckUserHasAvatar, defaultAvatar} from '../../utils/Utils';
import GlobalStore from '../../stores/GlobalStore';

const Editor = ({onChange, onSubmit, value}) => (
    <>
        <Form.Item>
            <TextArea rows={4} onChange={onChange} value={value}/>
        </Form.Item>
        <Form.Item>
            <Button htmlType="submit" onClick={onSubmit} type="primary">
                评论
            </Button>
        </Form.Item>
    </>
);

interface IComment {
    commentStore?: CommentStore;
    userStore?: UserStore;
    globalStore?: GlobalStore;
}

@inject("commentStore", "userStore", "globalStore")
@observer
class CommentBox extends Component<IComment, any> {
    onchange = (e) => {
        this.props.commentStore.SetComment(e.target.value);
    }

    render() {
        const user = this.props.userStore.userInfo;
        if (user) {
            CheckUserHasAvatar();
        }
        const comment = this.props.commentStore;
        return (
            <Comment
                avatar={
                    <div className="QAcomment">
                        <Avatar
                            src={`${SERVER_PICTURE_URL}/${user ? user?.avatarUrl : defaultAvatar}`}
                            alt=""
                            size={60}
                        />
                    </div>
                }
                content={
                    <div>
                        <div style={{fontSize: "0.16rem", color: "#999"}}>{user?.name}</div>
                        <Editor
                            onChange={this.onchange.bind(this)}
                            onSubmit={() => {
                                if (CheckUserLogin()) {
                                    if (CheckUserAuthorized()) {
                                        comment.addComment(comment.comment, -1, user.id);
                                    } else {
                                        this.props.globalStore.updateShowAuthModalVisible(true);
                                    }

                                } else {
                                    this.props.commentStore.SetComment("");
                                }
                            }}
                            value={comment.comment}
                        />
                    </div>
                }/>
        );
    }

}

export default CommentBox;